<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'新增服务项'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">科目</p>
            <div class="analyItemCon">
                <el-select v-model="subjectId" placeholder="请选择科目" >
                    <el-option v-for="item in options" :key="item.id"  :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-plus" circle @click="dialogVisible = true" class="operButton"></el-button>
            </div>
        </div>
        <el-dialog
            title="新增科目"
            append-to-body :visible.sync="dialogVisible" width="30%" :before-close="handleClose" lock-scroll >
            <div>
                <label>科目名称 </label>
                <input class="width200" v-model="addProject" type="text" placeholder="请输入科目名称">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary"  @click="saveSubject()">添 加</el-button>
            </span>
        </el-dialog>
        <div class="analyItem">
            <p class="analyItemTit tx-center">内容 </p>
            <div class="analyItemCon">
                <input class="width200" v-model="content" type="text" placeholder="请输入内容">
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">描述 </p>
            <div class="analyItemCon">
                <input class="width200" v-model="description" type="text" placeholder="请输入描述">
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">图片上传</p>
            <div class="analyItemCon">
                <div class="clearfix mt10 fl">
                    <rx-upload
                        class="fl"
                        :data="{id: 11}" :init="{class: 1, mime: 1}"
                        :elStyle="{width:'90px', height: '80px'}"
                        @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                    <rx-viewer  class="fl ml10">
                        <div class="clearfix">
                            <div class="fl mr10">
                                <img :src="standardImgurl | smallImg(78, 78)">
                            </div>
                        </div>
                    </rx-viewer>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">执行标准 </p>
            <div class="analyItemCon">
                <input class="width200" v-model="standard" type="text" placeholder="请输入执行标准">
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">金额 </p>
            <div class="analyItemCon">
                <input class="width200" v-model="money" type="number" placeholder="请输入金额" >
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="tx-center">
            <input type="button" class="uiBtn-normal uiBtn-blue" @click="saveItem()" value="确定">
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { getSubject, saveItem, saveSubject } from '../Resources/Api/index'
export default {
    data () {
        return {
            dialogVisible: false, // 弹框提示
            radio: '1',
            options: [], // 科目集合
            subjectId: '', // 科目编号值
            content: '', // 服务项内容
            description: '', // 描述
            standardImgurl: '', // 标准图片
            standard: '', // 标准描述
            money: '', // 金额
            addProject: '' // 新增科目
        }
    },
    created () {
        this.getSubject()
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        getSubject () {
            // 用_this 代替this
            let _this = this

            let params = {

            }
            // 查询服务项科目
            getSubject(params).then(results => {
                if (results.data.StatusCode === 1) {
                    _this.options = results.data.Body.subjectList
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 图片上传
        successUpload (value) {
            this.standardImgurl = value.src
        },
        saveItem () {
            let params = {
                userNo: this.userInfo.as_cardNo,
                userName: this.userInfo.as_fullName,
                item: {
                    content: this.content,
                    subjectId: this.subjectId,
                    description: this.description,
                    standardImgurl: this.standardImgurl,
                    standard: this.standard,
                    money: this.money
                }
            }
            // 查询服务项科目
            saveItem(params).then(results => {
                if (results.data.StatusCode === 1) {
                    this.setUpDatePlate()
                    // 关闭弹窗
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        saveSubject () {
            let params = {
                userNo: this.userInfo.as_cardNo,
                userName: this.userInfo.as_fullName,
                name: this.addProject
            }
            // 查询服务项科目
            saveSubject(params).then(results => {
                if (results.data.StatusCode === 1) {
                    this.getSubject()
                } else {

                }
            }).catch(error => {
                console.log(error)
            })
            this.dialogVisible = false
        },
        handleClose (done) {
            this.$confirm('确认关闭？').then(result => {
                done()
            }).catch((error) => {
                console.log(error)
            })
        }
    }
}
</script>
<style lang="scss">
    .operButton {
        position:absolute;
        top: 50%;
        right: 10px;
        transform:translateY(-50%);
    }
</style>
